<template>
     <scroll-view  class="scroll-content"
     scroll-y
	 v-if="height"  
	 refresher-enabled="true"
     :style="'height:'+height"
	 bindrefresherrefresh="onPullDownRefresh"
	 :refresher-triggered="triggered"
     @scrolltolower="onScrollToLower">
	 <view style="z-index: 0; width: 100%; height: 300rpx; position: fixed; background: linear-gradient(#DFF2FF, transparent);">
	 			 
	 </view>
    <view class="index-page">
		 <!-- style="background: linear-gradient(#DFF2FF, transparent);" -->
		 
        <view class="topbackground" style="z-index: 100;">
            <view class="header" :style="{ paddingTop: heightConfig.navBarPaddingTop + 'px' }">
                   
				<view class="Narbar_bo">
                    <view></view>
                    <view class="title" size="19px">首页</view>
                    <view></view>
                </view>
              	 <view style="display: flex; width: 100%; padding:10rpx 40rpx; box-sizing: border-box;">
              				 <view style="background-color:white; width: 100%; border-radius: 30rpx;">
              				 <u-search style="background-color: white;"  height="60rpx" searchIconColor="#4b3138"  :showAction="false" placeholder="搜索套餐/机构/体检项目"
              				     shape="square" v-model="keyword"  @change="keyWordchange" @click="searchFocus" ></u-search>
              					
              					 </view>
              					 <view v-if="keyword" style="width: 100rpx;  display: flex; align-items: center; justify-content: center;" @click="keyword=''">退出</view>  	
              			 </view>
               
				
				<list v-if="keyword" :listData="listData"></list>
				        
            </view>
           
            <view v-if="!keyword" class="" style="margin-left: 32rpx;margin-top: 20rpx;">
            <swiper :indicator-dots="true" :autoplay="true" circular :interval="3000" :duration="1000" indicator-color="#DAEFFF;">
                <swiper-item v-for="(item,index) in swiperList" :key="index">
                    <view class="swiper-item">
                        <image :src="url+item.img" mode="" style="width: 686rpx; height: 270rpx;"></image>
                    </view>
                </swiper-item>
                
            </swiper>
            </view>
             <view style="padding: 0 35rpx; margin-top: 10rpx;">
                     <u-notice-bar v-if="!keyword" :text="text"></u-notice-bar>
               </view>
            <!-- <scroll-view  scroll-y="true" class="scrollView" >
            					<view >A</view>
            					<view >B</view>
            					<view>C</view>
                                <view >A</view>
            					<view >B</view>
            					<view>C</view>
            </scroll-view> -->
        
            <!-- //功能 -->
            <!-- <view class="fun">
                    <view class="image1" >
                        <image src="/static/images2/单位入职体检.png"></image>
                    </view>
                    <view class="text1">
                        单位入职体检
                    </view>
                </view> -->
           <!-- 体检类别!-->
            <view   v-if="!keyword"  class="box">
                <view class="xh" @click="appointMent(item)" v-for="(item,index) in examinTypeData" :key="index">
                    <view class="list-box">
                        <image :src="url+item.url" class="image" style="border-radius: 50rpx;" />
                        <view class="text">{{item.typeName}}</view>
                    </view>
                </view>

            </view>

            <view  v-if="!keyword"  class="hosInfo">
                <view class="reportQuery" style="position: relative;">
					 <view style="width: 100%; height:48%;"  @click="baoGao">
						 <image src="https://www.whjxzfjwsfwzx.cn/prod-api/profile/upload/2025/06/13/icon1_20250613120107A006.png" style="width: 100%; height:100%;"></image>
					
					 </view>
					<view style="width: 100%; height: 95%; margin-top: 14rpx; position: relative;"   @click="TuanGou">
											 <image src="https://www.whjxzfjwsfwzx.cn/prod-api/profile/upload/2025/06/13/icon2_20250613120116A007.png" style="width: 100%; height: 50%;"></image>
					                         <div style="position: absolute; bottom:150rpx; left: 20rpx; font-size: 20rpx; color:#92606580;">轻松预约团购</div>
					</view> 
                </view>
				
                <view>
                    <view class="introduction" @click="hosCom">
                        <view class="text2">医院简介</view>
                    </view>
                    <view class="healthyEncy" @click="goHealthy">
                        <view class="text3">你的贴心健康管家</view>
                    </view>
                </view>
            </view>

            <!-- 热门推荐盒子 -->

            <view  v-if="!keyword"  class="bottom">
                <view class="hotComm">
					 <image src="../../static/images2/Frame 1321317450.png" style="width: 148rpx; height: 52rpx;"></image>
				</view>
                <!-- <view class="box"> -->

                <!-- <scroll-view class="scroll" scroll-y @scroll="pageScroll">
                    <u-swiper :list="swiperList" keyName="img" height="260" radius="0" indicator indicatorMode="dot"
                        circular @click="swiperSkip($event, 1)"></u-swiper>
                    <view>
                        <view class="img1">
                            <image style="width: 100%" v-for="(item, index) in profileList" :key="index" mode="widthFix"
                                :src="item.img" @click="swiperSkip(index, 2)"></image>
                        </view>
                    </view>
                    <image v-for="(item, index) in referralsList" :key="index" class="img" :src="item.goodImg" mode="">
                    </image>
                </scroll-view> -->
				<view>
				<!-- 	<z-paging ref="paging"  style="margin-top: 200rpx;;" refresher-only    @onRefresh="onRefresh" @query="queryList"> -->
                <view  class="list" v-for="(item,index) in tiJianLIst" :key="index" @click="projectLIstanbul(item)" >
                    <view class="one">
                        <image :src="url+item.imagePath.split(',')[0]" mode="" style="
                           margin:16rpx 0 0 10rpx;width: 193rpx;
                            height: 150rpx;"></image>            
                    </view>
                    <view class="two" style="margin-left:20rpx;">
                        <view class="center1">
                            {{item.setMealName}}
                        </view>
                        <view class="center2">
                      {{item.subscribeMedicalExamType.description}}
                        </view>
                    </view>
                    <view class="three">
                        <view class="right1">¥{{item.price}}</view>
                        <view class="right2">
                            <view class="text">点击预约</view>
                        </view>
                    </view>
                    <!-- </view> -->
                </view>
		    <!-- </z-paging> -->
			 </view>
               <image  v-if="!tiJianLIst.length" src="../../static/images2/empty.png"  style=" position: absolute; left: 50%; transform: translateX(-50%); width: 400rpx; height: 400rpx;"></image>
			</view>
		
        </view>
		
    </view>
   </scroll-view>
</template>

<script>
    import api from "@/api/homePage";
	import {baseUrl} from "@/config.js"
	import list from "../../subPages/components/list.vue"
    import loginApi from "@/api/login";
	import mine from "@/api/mine" 
    import {
        getToken
    } from "@/utils/auth";
    import {
        getQueryString
    } from "@/utils/index";
import row from "../../uni_modules/uview-ui/libs/config/props/row";

    export default {
        name: "Index",
        components: {
			list
		},
		
        data() {
            return {
				triggered:false,
				url:"",
				examinTypeData:[{name:"单位入职体检",id:0,img:"/static/images2/单位入职体检.png"},{name:"单位入职体检",id:1,img:"/static/images2/单位入职体检.png"},{name:"单位入职体检",id:2,
				 img:"/static/images2/单位入职体检.png"},{name:"单位入职体检",id:3,img:"/static/images2/单位入职体检.png"}],
				listData:[],
                lunBoTu:[
                    {
                        image:'/static/images2/轮播图.png'
                    },
                    {
                        image:'/static/images2/轮播图.png'
                    },
                    {
                        image:'/static/images2/轮播图.png'
                    }
                ],
				 imgUrlList:['../../static/images2/套餐儿童体检.png','../../static/images2/setmea2.png','../../static/images2/setmea1.png','../../static/images2/套餐老年人健康体检.png',
				 '../../static/images2/setmea5.png','../../static/images2/套餐男性全面体检.png'],
                list3: [
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                ],
                tiJianLIst:[
                 
                ],
			    height:"",
                codeUserId: null, // 上级id
                heightConfig: {},
                keyword: "",
				isHot:0,
				text:"移动医保亲情支付功能已上线",
                swiperList: [
                  
                ], // 轮播
                profileList: [], // 简介
                referralsList: [],
                transitionShow: true,
                transitionMode: "slide-right",
                iconShow: true,
                iconMode: "slide-up",
				pageNum:1,
				
            };
        },
	   async onPullDownRefresh() {
		  this.triggered = true
			//体检类型
		   await this.getType()
			//套餐列表
			await this.getPackagList()
		     // 3. 设置为 false，停止刷新动画
		    this.triggered = false;
          
	  },
        onLoad(query) {
		   let	_this = this
             uni.getSystemInfo({
				  success(res){
					       _this.heightConfig.navBarPaddingTop = res.statusBarHeight // 单位：px
				  }
			 })
        },
        onShow() {
            let launchOptions = uni.getLaunchOptionsSync();
            // 获取场景值 1011 - 扫描二维码进入
            if (launchOptions.scene == 1011) {
                let userInfo = uni.getStorageSync("userInfo");
                const token = getToken();
                if (userInfo.flag) {
                    uni.showToast({
                        title: `您的上级是${userInfo.parentNickName}`,
                        icon: "none",
                    });
                }
                if (!token) {
                    uni.navigateTo({
                        url: `/pages/login?codeUserId=${this.codeUserId}`,
                    });
                }
            }
        },
        onReady() {},
		mounted(){
		    this.$nextTick(()=>{
					this.height = "100vh"
			})
			// console.log(uni.getStorageSync('token'),"登录认证")
			this.url = baseUrl
			//轮播
		     this.getBannerList()
			 //体检类型
		     this.getType()
			 //套餐列表
			 this.getPackagList()
			 this.contentList()
		},
        methods: {
			refresh(){
			   console.log("已经开启刷新")
			},
			TuanGou(){
				if(!this.isLogin()) return 
				 uni.navigateTo({
				   url: `/subPages/TuanGou/TuanGou`
				 })
			},
			onScrollToLower(){
				console.log("滚动到底部了")
				 this.pageNum++;
				 this.getPackagList({pageNum:this.pageNum})
			},
			removeTags(str) {
			    if (!str) return str;
			    return str.replace(/<[^>]*>/g, '');
			},
			 async contentList(){
				 const res = await mine.getContentList()
				 res.rows.forEach((item,index)=>{
					    if(item.type==4)
						{
							 this.text = this.removeTags(item.content)
							 return 
						}
				 })
                 
			},
			isLogin(){
					  if(uni.getStorageSync('token'))
					   {
						  return true
					   }else{
						     this.$u.toast("请先登录")  
						  return false
					   }
			},
			queryList(){
				 //套餐列表
				 this.getPackagList()
			},
			onRefresh() {
							// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
							setTimeout(() => {
								// 1.5秒之后停止刷新动画
								this.$refs.paging.complete();
							}, 1500)
		   },
		   async getBannerList(){
			      let res = await mine.getBannerList()
			     
				   this.swiperList = res.rows
			       
			},
			async getType(){
				 let res = await mine.getExameTypeList()
				 this.examinTypeData = res.rows
				
				   
			},
		    async getPackagList(data={}){
				
				  this.isHot = 1
				 let res = await mine.getPackagesList({isHot:this.isHot,pageNum:this.pageNum})
				  console.log(res)
			      if(res.total<=this.tiJianLIst.length) return 
				// / this.tiJianLIst = res.rows
				 this.tiJianLIst = [...this.tiJianLIst, ...res.rows];
			},
		   async keyWordchange(e){
				
				  //每次keyword改变的时候拿到用户的输入去搜素
			
				         // .....调取搜素api
						 // 给this.listData赋值
						// this.listData.push({name:"张三"})
						 let res = await mine.getPackagesList({setMealName:e})	
						 this.listData = res.rows
					
			},
            // 预约类型
            appointMent(item) { 
				if(!this.isLogin()) return 
                uni.navigateTo({
                  url: `/subPages/chiPhyExaP/chiPhyExaP?data=${encodeURIComponent(JSON.stringify(item))}`
                })
            },
			//
			projectLIstanbul(item){
				if(!this.isLogin()) return 
				 uni.navigateTo({
				   url: `/subPages/meaDetail/meaDetail?data=${encodeURIComponent(JSON.stringify(item))}`
				 })
			},
            hosCom(){
                uni.navigateTo({
                    url: "/subPages/hosIntroduction/hosIntroduction",
                })
            },
            baoGao(){
				if(!this.isLogin()) return 
                uni.navigateTo({
                    url: "/subPages/phyExaRep/phyExaRep",
                })
                
            },
			goHealthy(){
				  uni.navigateTo({
				      url: "/subPages/healthy/healthy",
				  })
			},
            getReferralsList() {
                api.getReferralsList().then((res) => {
                    if (res.code == 200) {
                        this.referralsList = res.data;
                    }
                });
            },
            swiperSkip(index, type) {
                if (type == 1) {
                    // 轮播图跳转
                    if (this.swiperList[index].goodId) {
                        uni.navigateTo({
                            url: `/subPages/details/goodDetail?id=${this.swiperList[index].goodId}`,
                        });
                    }
                } else if (type == 2) {
                    // 主页大图跳转
                    if (this.profileList[index].goodId) {
                        uni.navigateTo({
                            url: `/subPages/details/goodDetail?id=${this.profileList[index].goodId}`,
                        });
                    }
                }
            },
            searchFocus() {
                uni.navigateTo({
                    url: "/subPages/details/searchPage",
                });
            },
            switchIcon() {
                this.iconShow = !this.iconShow;
            },
            pageScroll() {
                let transitionShow = this.transitionShow;
                if (transitionShow) this.transitionShow = false;
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.transitionShow = true;
                    clearTimeout(this.timer);
                }, 1000);
            },
            clickNavigation(item) {
                const token = getToken();
                if (!token) {
                    uni.navigateTo({
                        // url: "/pages/login",
                    });
                } else {
                    if (item.id == 1) {
                        // 专属福利
                    } else if (item.id == 2) {
                        // 客服
                    } else if (item.id == 3) {
                        // 购物车
                        uni.switchTab({
                            url: "/pages/shopCar",
                        });
                    } else if (item.id == 4) {
                        // 活动订阅
                    }
                }
            },
        },
    };
</script>

<style lang="less" scoped>
	/deep/.z-paging-content{
		margin-top: 73vh;
		
	}
	.paging {
		& :deep(.zp-paging-container-content) {
			display: flex;
			flex-flow: wrap;
			top: 200rpx;
			justify-content:space-between;
		}
	 
	
	
	}
    * {
        margin: 0;
        padding: 0;
    }
    /deep/.u-search__content{
		 background: none !important;
	}
	/deep/.u-search__content__input{
		 background:none !important;
	}
    .topbackground {
        width: 100%;
      
        // background: url("/static/images2/首页顶部背景图.png") no-repeat;
        background-size: 100% 100%;
    }

    .index-page {

        width: 750rpx;
        // height: 2158rpx;
    
        background: #F7F8FA;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-direction: column;
        // background-color: #fff;

        .header {
            width: 100%;
            // padding: 0 20rpx;
            // background-color: #fff;

            .logo {
                width: 200rpx;
                height: 60rpx;
                // background-color: #fee7eb;
                border-radius: 20px;
                text-align: center;
                line-height: 60rpx;
                margin: 0 auto;
            }

            .search {
                width: 670rpx;
                height: 72rpx;
                background: #FFFFFF;
                // background: black;
                border-radius: 34rpx 34rpx 34rpx 34rpx;
                // padding: 20rpx 0;
                margin-left: 40rpx;
                margin-top: 10rpx;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .Narbar_bo {
            width: 100%;
            height: 35px;
            display: flex;
            padding: 0 28rpx;
            justify-content: space-between;
            align-items: center;

            .title {
                font-size: 18px;
                font-weight: 600;
            }
        }
    }

    .scroll {
        width: 686rpx;
        height: 270rpx;
        // overflow-y: auto;
        margin: 20rpx 32rpx 0;
        background: #FFFFFF;
        border-radius: 24rpx 24rpx 24rpx 24rpx;

        .img {
            width: 100%;
            height: 100%;
            // margin-top: 12rpx;
        }

        .img1 {
            width: 100%;
            height: 100%;
            background-size: cover;
        }
    }

    .fun {
        width: 144rpx;
        // height: 112rpx;
        display: inline-block;
        justify-content: center;
        align-items: center;
    }

    .image1 {}

    .box {
        display: flex;
        align-items: center;

        flex-wrap: wrap;
        margin-left: 40rpx;

        .xh {
            margin-top: 34rpx;
            flex: 1;
            max-width: 25%;
            min-width: 25%;

            .list-box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 144rpx;
                height: 112rpx;
                // background-color: #ffffff;
                // margin-bottom: 30rpx;
                border-radius: 22rpx;

                .text {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin-top: 8rpx;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    color: #333333;

                }

                .image {
                    height: 68rpx;
                    width: 68rpx;
                }
            }
        }
    }

    .hosInfo {
        display: flex;
        margin-top: 28rpx;
    }

    .reportQuery {
        width: 332rpx;
      
        margin-left: 34rpx;
        // margin-top:34rpx;
    //    background: url("../../static/images2/首页报告查询.png") no-repeat;
        background-size: 100% 100%;
    }

    .introduction {
        width: 332rpx;
        height: 122rpx;
        margin-left: 20rpx;
        // margin-top:34rpx;
        background: url("https://www.whjxzfjwsfwzx.cn/prod-api/profile/upload/2025/06/13/hintroduction_20250613120046A005.png") no-repeat;
        background-size: 100% 100%;
    }

    .healthyEncy {
        width: 332rpx;
        height: 122rpx;
        margin-left: 20rpx;
        margin-top: 16rpx;
        // margin-top:34rpx;
        background: url("https://www.whjxzfjwsfwzx.cn/prod-api/profile/upload/2025/06/13/healthy_20250613120037A004.png") no-repeat;
        background-size: 100% 100%;
    }

    .text1 {
        margin: 86rpx 0 0 22rpx;
        width: 160rpx;
        height: 56rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
       color: #A6CDF4;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .text2 {
        padding: 68rpx 0 0 20rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 80rpx;
        height: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #F0BB70;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }

    .text3 {
        padding: 70rpx 0 0 24rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 160rpx;
        height: 28rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #A6CDF4;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .bottom {
        margin-top: 32rpx;
        width: 750rpx;
   
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 0rpx 0rpx;
    }

    .hotComm {
        padding: 30rpx 0 14rpx 32rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 148rpx;
        height: 52rpx;
        font-family: YouSheBiaoTiYuan, YouSheBiaoTiYuan;
        font-weight: 400;
        font-size: 40rpx;
        color: #333333;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }


    // .box {
    //     width: 750rpx;
    //     height: 1624rpx;
    //     background: #F7F8FA;
    // }

    .list {
        display: flex;
        margin: 32rpx 32rpx 0;
        // border: 1rpx solid black;
        width: 686rpx;
        height: 190rpx;
        background: #F8FCFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
    }

    .onge {
        width: 193rpx;
        height: 150rpx;
        background: #F6F6F6;
        border-radius: 12rpx 12rpx 12rpx 12rpx;

        image {
            width: 193rpx;
            height: 150rpx;
        }
    }

    .center1 {
        margin-top: 24rpx;
        
        // width: 114rpx;
        height: 40rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .center2 {
        margin-top: 10rpx;
        width: 323rpx;
        height: 68rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #777777;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .right1 {
        margin: 38rpx 0rpx 0 25rpx;
        width: 110rpx;
        height: 36rpx;
        font-family: Douyin Sans, Douyin Sans;
        font-weight: bold;
        font-size: 30rpx;
        color: #EB5432;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }

    .right2 {

        margin: 42rpx 0 0 0;
        width: 146rpx;
        height: 52rpx;
        background: #159DFF;
        border-radius: 74rpx 74rpx 74rpx 74rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .text {
        // text-overflow: ellipsis;
        // white-space: nowrap;
        width: 104rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
    .scrollView{
        width:686rpx;
        // border:1rpx solid black;
        height:70rpx;
    }
</style>